<!--
* @description 装备资料库
* @fileName zhuangbei.vue
* @author huangyu
* @date 2022/05/19 11:19:02
!-->
<template>
    <div class="otor_content">
        <div class="otor_wrap border">
            <el-form :inline="true" class="otor_form otor_form_search">
                <el-form-item label="物品名称">
                    <el-input placeholder="物品名称" v-model="name"></el-input>
                </el-form-item>
                <el-form-item label="装备类型">
                    <el-select v-model="ZBType" style="width:100px;">
                        <el-option :value="1" label="武器"></el-option>
                        <el-option :value="2" label="防具"></el-option>
                        <el-option :value="3" label="饰品"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="物品品质">
                    <el-select v-model="pingzhi" style="width:100px;">
                        <el-option value="" label="全部"></el-option>
                        <el-option value="唯一" label="唯一"></el-option>
                        <el-option value="英雄" label="英雄"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="武器类型" v-if="ZBType==1">
                    <el-select v-model="wqType" style="width:100px;">
                        <el-option value="" label="全部"></el-option>
                        <el-option :value="item" :label="item" v-for="(item,index) in WQTypeList" :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="防具类型" v-if="ZBType==2">
                    <el-select v-model="fjType" style="width:100px;">
                        <el-option value="" label="全部"></el-option>
                        <el-option :value="item" :label="item" v-for="(item,index) in FJTypeList" :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="饰品类型" v-if="ZBType==3">
                    <el-select v-model="fjType" style="width:100px;">
                        <el-option value="" label="全部"></el-option>
                        <el-option :value="item" :label="item" v-for="(item,index) in SPTypeList" :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="物品等级">
                    <el-input placeholder="最小" v-model="min" style="width:80px"></el-input>
                    <el-input placeholder="最大" v-model="max" style="width:80px"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="otor_wrap border">
            <el-table :data="list" @row-dblclick="rowDBClick" highlight-current-row width="100%" border>
                <el-table-column type="index" width="50" label="序号"></el-table-column>
                <el-table-column label="物品图标" prop="icon" width="100">
                    <template slot-scope="scope">
                        <div class="icon" :style="{background:'url(/aion/images/game/icon/items/'+scope.row.icon+')',width:'40px',height:'40px',cursor:'pointer'}" v-if="scope.row.icon"  @click="clickDetail(scope.row)"></div>
                    </template>
                </el-table-column>
                <el-table-column label="物品名称" prop="name">
                    <template slot-scope="scope">
                        <div v-if="scope.row.pingzhi == '英雄'" class="color_yx">{{ scope.row.name }}</div>
                        <div v-if="scope.row.pingzhi == '唯一'" class="color_wy">{{ scope.row.name }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="物品品质" prop="pingzhi"></el-table-column>
                <el-table-column label="物品类型" prop="type"></el-table-column>
                <el-table-column label="物品等级" prop="level"></el-table-column>
           </el-table>
        </div>

        <pagination
        :total="total"
        :current-page="pageindex"
        :display="pagesize"
        @pagechange="pagechange"
        ></pagination>

        <!-- <vDataDetail :model="model"></vDataDetail> -->

        <!-- 物品详情 -->
        <el-dialog :visible.sync="dialogDetail" width="550px" title="物品详情信息" append-to-body  v-dialogDrag>
            <vDataDetail :model="row"></vDataDetail>
        </el-dialog>
    </div>
</template>

<script>
import { get } from '@/common/app.js'
import vDataDetail from './dataDetail.vue'
import pagination from "@/components/common/pagination.vue";
import { WQType,FJType,FJBType,SPType } from "@/components/game/aion/data.js"
export default {
    props:{
        isComponents: Boolean,
    },
    components: {vDataDetail,pagination},
    data() {
        return {
            id: '',
            row: {},
            list: [],
            name: '',
            ZBType: 1,
            wqType: '',
            fjType: '',
            min: '',
            max: '',
            pingzhi: '',

            WQTypeList: WQType,
            FJTypeList: FJType,
            FJBTypeList: FJBType,
            SPTypeList: SPType,

            model: {},
            dialogDetail: false,

            pageindex: 1,
            pagesize: 20,
            total: 0,
        }
    },
    mounted() {
        // this.getDataWQ()
    },
    methods: {
        search(){
            if(this.ZBType==1)
                this.fjType = ''
            else if(this.ZBType==2)
                this.wqType = ''
            this.pageindex = 1
            this.getData()
        },
        clickDetail(row){
            this.row = row
            this.dialogDetail = true
        },
        getData(){
            let params = {
                type: 'getAionData',
                cType: this.ZBType,
                data: {
                    name: this.name,
                    wqType: this.wqType,
                    fjType: this.fjType,
                    min: this.min,
                    max: this.max,
                    pingzhi: this.pingzhi,
                    pageIndex: this.pageindex,
                    pageSize: this.pagesize,
                },
            }
            get('game',params).then(res=>{
                if(res){
                    this.list = res.list
                    this.total = res.total

                    // 方便后续操作，默认添加当前装备类型
                    if(this.list.length>0){
                        this.list.forEach(item=>{
                            item.ZBType = this.ZBType
                        })
                    }
                }
            })
        },
        
        rowDBClick(row){
            if(this.isComponents){
                this.$confirm(`确认 选择" ${row.name} "吗？`, "提示").then(() => {
                    this.$emit('rowData',row)
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });          
                });
                
            }
        },
        pagechange: function(currentPage) {
            this.pageindex = currentPage;
            this.getData();
        },
    },
}
</script>

<style scoped>
</style>